<template>
    <el-dialog :visible.sync="dialogFormVisible" title="完工核实结果">
        <div class="instructions">
            <span class="label">核实说明：</span>
            <span>{{ details.verifyDesc }}</span>
        </div>
        <div class="content">
            <div class="title">图片：</div>
            <div class="img-wrap">
                <el-image v-for="(item, index) in imgArr" :key="index" class="img" :src="item" :preview-src-list="imgArr" :z-index="99999"> </el-image>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'CheckDialog',
    data() {
        return {
            details: {},
            imgArr: [],
            dialogFormVisible: false
        }
    },
    methods: {
        init(data) {
            this.dialogFormVisible = true
            this.details = data
            this.imgArr = data.verifyPhotos ? data.verifyPhotos.split(',') : []
        }
    }
}
</script>

<style scoped lang="scss">
.content {
    margin-top: 30px;
    width: 100%;
    display: flex;
    .title {
        width: 70px;
        flex-shrink: 0;
    }
    .img-wrap {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        .img {
            margin-right: 16px;
            margin-bottom: 20px;
            width: 120px;
            height: 120px;
            cursor: pointer;
        }
    }
}

.instructions {
    display: flex;
    .label {
        flex-shrink: 0;
    }
}
</style>
